<template>
  <div id="mail">
    <div class="search">
    <span>
      部门：
      <el-select
        v-model="departmentValue"
        placeholder="请选择"
        size="medium"
        style="width: 200px"
      >
        <el-option
          v-for="item in departmentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </span>
    <span>
      用户名：<el-input
        v-model="input"
        style="width: 200px"
        placeholder="请输入用户名"
      />
    </span>
    <!-- <span style="margin-top: 20px; margin-left: 15px">
      登录名：<el-input
        v-model="input"
        style="width: 200px"
        placeholder="请输入登录名"
      />
    </span> -->
    <!-- <span style="margin-top: 20px; margin-left: 25px">
      部门：
      <el-select
        v-model="departmentValue"
        placeholder="请选择"
        size="medium"
        style="width: 200px"
      >
        <el-option
          v-for="item in departmentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </span> -->
    <span>
      用户状态：
      <el-select
        v-model="statesValue"
        placeholder="请选择"
        size="medium"
        style="width: 100px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </span>
    <span>
      <el-button type="primary" @click="searchTable" style="margin-left: 15px">
        搜索
      </el-button>
      <el-button
        type="default"
        plain
        @click="clearly"
        style="margin-left: 15px"
      >
        重置
      </el-button>
      <!-- <el-button
        type="primary"
        @click="dialogVisible = true"
        style="margin-left: 15px"
        >新增用户
      </el-button> -->
    </span>
  </div>

  <div class="information">
    <el-table
      :data="userTableData"
      style="width: 100%"
      border
      default-expand-all
      stripe
    >
      <!-- <el-table-column type="selection" width="55px" /> -->
      <!-- <el-table-column prop="id" label="编号" /> -->
      <el-table-column label="登录名称">
        <template v-slot="scope">
          <!-- <el-input
            v-if="scope.row.editing"
            v-model="scope.row.username"
          ></el-input>
          <span v-else>{{ scope.row.username }}</span> -->
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template v-slot="scope">
          <el-input
            v-if="scope.row.editing"
            v-model="scope.row.name"
          ></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门">
        <template v-slot="scope">
          <!-- <el-input
            v-if="scope.row.editing"
            v-model="scope.row.departmentName"
          ></el-input>
          <span v-else>{{ scope.row.departmentName }}</span> -->
          <span>{{ scope.row.departmentName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户角色">
        <template v-slot="scope">
          <!-- <el-input
            v-if="scope.row.editing"
            v-model="scope.row.roleName"
          ></el-input>
          <span v-else>{{ scope.row.roleName }}</span> -->
          <span>{{ scope.row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号">
        <template v-slot="scope">
          <el-input
            v-if="scope.row.editing"
            v-model="scope.row.phone"
          ></el-input>
          <span v-else>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱">
        <template v-slot="scope">
          <el-input
            v-if="scope.row.editing"
            v-model="scope.row.email"
          ></el-input>
          <span v-else>{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户状态">
        <template v-slot="scope">
          <!-- <el-switch v-model="scope.row.states"></el-switch> -->
          <el-tag v-if="scope.row.status == 1" type="success ">正常</el-tag>
          <el-tag v-else type="info ">禁用</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="date" label="创建时间" /> -->
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            plain
            v-if="!scope.row.editing"
            type="primary"
            @click="scope.row.editing = true"
            >编辑</el-button
          >
          <el-button
            plain
            v-if="scope.row.editing"
            type="primary"
            @click="saveEdit(scope.row)"
            >保存</el-button
          >
          <el-button type="danger" @click="deleteRow(scope.$index)" plain
            >禁用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  </div>


  <el-dialog v-model="dialogVisible" title="新建用户" class="edit">
    <el-form :model="newUser">
      <!-- <el-form-item>
        <span style="display: flex; width: 80px; justify-content: right"
          >用户编号:</span
        >
        <el-input
          v-model="newUser.id"
          disabled
          style="width: 200px; margin-left: 10px"
        ></el-input>
      </el-form-item> -->
      <el-form-item>
        <span style="display: flex; width: 80px; justify-content: right"
          >登录名:</span
        >
        <el-input
          v-model="newUser.username"
          style="width: 200px; margin-left: 10px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <span style="display: flex; width: 80px; justify-content: right"
          >用户名:</span
        >
        <el-input
          v-model="newUser.name"
          style="width: 200px; margin-left: 10px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <span style="display: flex; width: 80px; justify-content: right"
          >部门:</span
        >
        <el-input
          v-model="newUser.department"
          style="width: 200px; margin-left: 10px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <span style="display: flex; width: 80px; justify-content: right"
          >手机号:</span
        >
        <el-input
          v-model="newUser.phone"
          style="width: 200px; margin-left: 10px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <span style="display: flex; width: 80px; justify-content: right"
          >邮箱:</span
        >
        <el-input
          v-model="newUser.email"
          style="width: 200px; margin-left: 10px"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <span style="display: flex; width: 80px; justify-content: right"
          >用户状态:</span
        >
        <el-switch
          v-model="newUser.states"
          style="width: 200px; margin-left: 10px"
        ></el-switch>
      </el-form-item> -->
      <el-form-item>
        <span style="display: flex; width: 80px; justify-content: right"
          >角色:</span
        >
        <el-input
          v-model="newUser.role"
          style="width: 200px; margin-left: 10px"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveNewUser">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { getAllDepartment, getAllUser } from "../../network/net.js";

const input = ref("");
const statesValue = ref();
const departmentValue = ref();
const departmentOptions = ref([{ value: 1, label: "预报中心" }]);
const options = [
  { value: "all", label: "全部" },
  { value: true, label: "正常" },
  { value: false, label: "禁用" },
];
const tableData = [];
const userTableData = ref([...tableData]);

const searchTable = () => {
  userTableData.value = tableData.filter((item) => {
    const matchesName = item.name.includes(input.value);
    const matchesState =
      statesValue.value === "" || item.states === statesValue.value;
    return matchesName && matchesState;
  });
};

const clearly = () => {
  input.value = "";
  statesValue.value = "";
  userTableData.value = [...tableData];
};

const dialogVisible = ref(false);
const newUser = reactive({
  id: tableData.length ? tableData[tableData.length - 1].id + 1 : 1,
  name: "",
  address: "",
  telephone: "",
  email: "",
  states: true,
  date: new Date().toISOString().split("T")[0],
});

const saveNewUser = () => {
  tableData.push({ ...newUser, editing: false });
  userTableData.value = [...tableData];
  dialogVisible.value = false;
  ElMessage.success("新建用户成功");
};

const saveEdit = (row) => {
  row.editing = false;
  ElMessage.success("编辑成功");
};

const deleteRow = (index) => {
  ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      tableData.splice(index, 1);
      userTableData.value = [...tableData];
      ElMessage.success("删除成功");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};
let token = sessionStorage.getItem("token");
// 获取部门数据
getAllDepartment(token).then((res) => {
  if (res?.data?.code == "200" && res?.data?.data?.length > 0) {
    let arr = res?.data?.data;
    arr.map((item) => {
      item.value = item.id;
      item.label = item.name;
      return item;
    });
    departmentOptions.value = arr;
  }
});
// 获取用户数据
getAllUser(token).then((res) => {
  if (res?.data?.code == "200" && res?.data?.data?.length > 0) {
    let arr = res?.data?.data;
    arr.map((item) => {
      item.departmentName = item.department.name;
      item.roleName = item.role.name;
      item.pw = "********";
      item.editing = false;
      return item;
    });
    userTableData.value = arr;
  }
});
</script>

<style lang="less" scoped>
#mail{
  padding: 5px;
}
.search {
  width: 90vw;
  // height: 6vh;
  background-color: #00000000;
  // margin-left: 30px;
  // margin-top: 20px;
  margin-bottom: 5px;
  display: flex;
  align-content: center;
  align-items: center;
  text-align: center;
  margin-top: 5px;
  span{
    margin-right: 15px;
  }
}
.information {
  width: 90vw;
  height: 6vh;
  background-color: rgb(214, 218, 217);
  // margin-left: 30px;
  // margin-top: 20px;
  // margin-bottom: 20px;
  display: flex;
  align-content: center;
  text-align: center;
}
</style>
<style>
.el-dialog {
  --el-dialog-width: 400px;
  --el-dialog-margin-top: 25vh;
  --el-dialog-bg-color: var(--el-bg-color);
  --el-dialog-box-shadow: var(--el-box-shadow);
  --el-dialog-title-font-size: var(--el-font-size-large);
  --el-dialog-content-font-size: 14px;
  --el-dialog-font-line-height: var(--el-font-line-height-primary);
  --el-dialog-padding-primary: 16px;
  --el-dialog-border-radius: var(--el-border-radius-small);
  background: var(--el-dialog-bg-color);
  border-radius: var(--el-dialog-border-radius);
  box-shadow: var(--el-dialog-box-shadow);
  box-sizing: border-box;
  margin: var(--el-dialog-margin-top, 15vh) auto 50px;
  overflow-wrap: break-word;
  padding: var(--el-dialog-padding-primary);
  position: relative;
  width: var(--el-dialog-width, 50%);
}
</style>
